<template>
  <div>
    <header>
      <!-- 状态栏 -->
      <div class="header_top"></div>
      <div class="header_foot">
        <img
          @click="$router.push('/')"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psd6kfidpmeim4s5z6hawkernctxvhejvbae7e7710-e2f4-4fc5-b344-84ed147ea16e"
          alt=""
        />
        <!-- <div class="fanhui"><back></back></div> -->
        <span>全球&nbsp;&nbsp;旅拍</span>
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4mxcbv57kar5aczhtt4sgohbhez6akh11adc042-50e4-4f93-b004-0dc663cf7d0e"
          alt=""
        />
      </div>
    </header>
    <div class="zan"></div>
    <!-- 版心 -->
    <div class="content">
      <img
        class="image1"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pss4i9hz9hmphdgl4skio1xq5og2xog1r8f6863a4-8216-4ebc-8948-5c3c05c084eb"
        alt=""
      />
      <button class="btn1" @click="onClick_1">中国婚博会</button>
      <div class="con">
        <img
          class="image2"
          v-for="(item, index) in loopData0"
          :key="index"
          :src="item.lanhuimage0"
          alt=""
        />
      </div>
      <div class="hot">
        <p>全国&nbsp;&nbsp;旅拍季</p>
        <span>更多新人旅拍</span>
      </div>
      <div class="photo">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psgg2zi0awdgsz22q3zgvmmm87583aqs5ucd71ff9f5-405b-4681-84b7-cc770ce781eb"
          alt=""
        />
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pst0yhsld1ltyr4e9mcdk8q39u9w48um9281e4f3-8c07-4ca4-8304-698f2608396d"
          alt=""
        />
      </div>
      <div class="main">
        <div class="main_1">
          <span class="text_1">爆款套系\旅拍地覆盖各地</span>
          <div class="main_text1">
            <span class="text_2">大理</span>
            <span class="text_2">大连</span>
            <span class="text_2">丽江</span>
            <span class="text_2">三亚</span>
            <p class="text_3">¥8999</p>
          </div>
        </div>
        <div class="main_1">
          <span class="text_1">克洛伊全球轻奢系列</span>
          <div class="main_text1">
            <span class="text_2">大理</span>
            <span class="text_2">大连</span>
            <span class="text_2">丽江</span>
            <span class="text_2">三亚</span>
            <p class="text_3">¥10999</p>
          </div>
        </div>
      </div>
      <div class="hot">
        <p>目的地&nbsp;&nbsp;精选</p>
      </div>
      <div class="menu">
        <div class="menu_left">
          <p class="text_4">三亚</p>
          <p class="text_5">北纬10°小马尔代夫</p>
          <p class="text_5">海滩</p>
          <p class="text_5">清爽一夏</p>
          <p class="text_5">豪华游轮</p>
          <p class="text_5">海景酒店</p>
        </div>
        <img
          class="menu_right"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psolzphmfsblirsvza3sqnxg16qbfe8ttn388dfbd9-3d52-4150-9499-803200bb0a42"
          alt=""
        />
      </div>
      <button class="shop" @click="onClick_2">更多案例</button>
      <!-- 底部黑色框 -->
      <footer></footer>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/psmdqxgg4lm0dd70arffammmmzdmkewvhjb82b8453-0aab-46cc-8583-da254f9bb524",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/psgseehz424y8l6imqmqsj1fyghjx6t5b5aff36a09-48da-4866-a1dd-32ccffb3385b",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/psx56mewl42ri3xypb62s8oqh6hnn6dfa49b58857-066c-43dd-9fcf-5816e35edafe",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/ps28ts1rt0nwx16iqp1ammpwpovya6lfafi3c579954-30aa-41b5-bc10-54a000bd8b89",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/psbze0mf70wxg2rtt6vj3ro2j2djr19wqg40d5abd8-86c6-4740-8f05-7bb1a0f7360d",
        },
      ],
      constants: {},
    };
  },
  methods: {
    onClick_1() {
      alert(1);
    },
    onClick_2() {
      alert(2);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-size: 13.33333vw;
}
.fanhui {
  width: 0.5rem;
  height: 0.4rem;
}
header {
  width: 100%;
  height: 1.76rem;
  background-color: #88e1f4;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 3;
}
.zan {
  width: 100%;
  height: 1.76rem;
}
.header_top {
  width: 80%;
  height: 0.25rem;
  background-color: pink;
  margin: 0.34rem 0 0 0.68rem;
}

.header_foot {
  width: 6.84rem;
  height: 0.4rem;
  line-height: 0.4rem;
  margin: 0.57rem 0 0.28rem 0.31rem;
  display: flex;
  justify-content: space-between;
}

.header_foot span {
  font-size: 0.37rem;
}

.content {
  width: 92%;
  height: 14.48rem;
  margin: 0 auto;
  /* background-color: pink; */
  overflow: hidden;
  overflow-y: auto;
  position: relative;
}

.image1 {
  width: 100%;
  height: 2.8rem;
  /* margin: -0.01rem 0 0 0.3rem; */
}

.btn1 {
  border: none;
  outline: none;
  width: 2rem;
  height: 0.6rem;
  color: rgba(51, 51, 51, 1);
  background-color: #abecf9a2;
  font-size: 0.28rem;
  border-radius: 0.12rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.28rem;
  margin: 0 auto;
  position: relative;
  display: block;
  top: -0.35rem;
}

.con {
  display: flex;
  justify-content: space-around;
}

.image2 {
  width: 0.8rem;
  height: 1.2rem;
}

.hot {
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}

.hot p {
  width: 60%;
  font-size: 0.3rem;
  font-weight: 800;
}

.hot span {
  width: 30%;
  font-size: 0.2rem;
  font-weight: 200;
  text-align: right;
  color: #9a9a9a;
}

.photo {
  height: 2.4rem;
  display: flex;
  justify-content: space-between;
}

.photo img {
  width: 3.2rem;
  height: 2.4rem;
}

.main {
  height: 0.82rem;
  display: flex;
  justify-content: space-between;
}

.main_1 {
  width: 47%;
  height: 0.82rem;
  border-radius: 0.2rem;
  border: 1px solid #ccc;
  box-shadow: 0.02rem 0.02rem #eee;
  position: relative;
}

.text_1 {
  width: 2.6rem;
  /* height: 0.21rem; */
  color: rgba(51, 51, 51, 1);
  font-size: 0.22rem;
  white-space: nowrap;
  line-height: 0.22rem;
  margin: 0.1rem 0 0 0.1rem;
  position: absolute;
}

.main_text1 {
  display: flex;
  justify-content: space-around;
  margin: 0.4rem 0 0 0.1rem;
}

.text_2 {
  width: 1.88rem;
  height: 0.19rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.2rem;
  /* text-align: center; */
  white-space: nowrap;
  line-height: 0.2rem;
}

.text_3 {
  font-size: 0.2rem;
}

.menu {
  width: 6.97rem;
  height: 2.44rem;
  margin: 0.34rem 0 0 0;
  display: flex;
  justify-content: space-between;
}

.menu_left {
  width: 1.82rem;
  height: 2.28rem;
  border: 1px solid #eee;
  box-shadow: 0 0 0.2rem #eeeeee;
}

.text_4 {
  /* width: 0.53rem; */
  height: 0.3rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.28rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.28rem;
}

.text_5 {
  /* width: 1.59rem; */
  height: 0.19rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.2rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.2rem;
  margin-top: 0.14rem;
}

.menu_right {
  width: 5rem;
  height: 2.28rem;
  /* margin: 0.03rem 0 0 -0.08rem; */
}

.shop {
  border: none;
  outline: none;
  height: 0.48rem;

  width: 2.02rem;
  margin: 0.12rem 0 0 2.4rem;
  color: rgba(248, 248, 248, 1);
  background-color: rgba(216, 65, 65, 1);
  border-radius: 20px;
  font-size: 0.24rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.24rem;
  /* margin-top: 0.01rem; */
}

body {
  font-size: 0;
}

footer {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 6px;
  width: 2.7rem;
  height: 0.12rem;
  /* margin: 0.69rem 0 0.12rem 2.1rem; */
  margin-left: 2.1rem;
  position: absolute;
  bottom: 0.2rem;
}
</style>
